<template>
  <div id="interactList">
    <h1 class="con-right-title">
      互动消息管理
    </h1>
    <div class="bottom-box">
      <!-- table -->
      <div class="table">
        <!-- 上部搜索条件 -->
        <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
        <div class="table-conBtn">
          <el-button type="warning" @click="exportFile">
            导出
            <i class="el-icon-download el-icon--right"></i>
          </el-button>
          <freshCom @searchList="searchList"></freshCom>
        </div>
        <!-- 表格部分 -->
        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          style="width: 100%"
          max-height="490"
          ref="table"
        >
          <el-table-column type="index" width="60" label="序号" align="center">
            <template slot-scope="scope">
              {{
                scope.$index
                  | filterPage(searchParams.pageNum, searchParams.pageSize)
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="接收时间"
            width="200"
            prop="createdDate"
          ></el-table-column>
          <el-table-column label="用户名" prop="sendUser.userName" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.sendUser && scope.row.sendUser.userName">{{
                scope.row.sendUser.userName
              }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            label="大鹏号"
            width="150"
            prop="sendUser.dpAccount"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.sendUser && scope.row.sendUser.dpAccount">{{
                scope.row.sendUser.dpAccount
              }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="来源" width="150">
            <template slot-scope="scope">
              <span
                v-if="scope.row.originTopicType"
                class="tag-span"
                :class="scope.row.originTopicType | filterClass('messageType')"
                >{{
                  scope.row.originTopicType | filterName('messageType')
                }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="消息内容展示" min-width="200">
            <template slot-scope="scope">
              <span v-html="filterContent(scope.row)"></span>
            </template>
          </el-table-column>
          <el-table-column label="接收马甲号" min-width="200">
            <template slot-scope="{ row }">
              <span v-if="row.receiverUser">
                <dl class="vest-info">
                  <dt class="avatar-box">
                    <el-image
                      fit="contain"
                      :src="row.receiverUser.avatar"
                    ></el-image>
                  </dt>
                  <dd>{{ row.receiverUser.dpAccount }}</dd>
                  <dd :title="row.receiverUser.userName">
                    {{ row.receiverUser.userName }}
                  </dd>
                </dl>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="180">
            <template slot-scope="scope">
              <el-button
                v-permission="'wh:system:message:replay'"
                type="text"
                @click="addComment(scope.row.commentId, scope.row.receiverUser)"
                >添加回复</el-button
              >
              <el-button
                v-permission="'wh:system:message:comment'"
                type="text"
                @click="
                  changeView(
                    'wh:interactManagement:interactManage:commentList',
                    scope.row.originTopicId,
                    scope.row.originTopicType
                  )
                "
              >
                评论列表
              </el-button>
              <el-button
                v-if="scope.row.originTopicType === '4'"
                type="text"
                @click="showDetail(scope.row)"
              >
                作业详情
              </el-button>
              <el-button
                v-if="scope.row.originTopicType === '3'"
                type="text"
                @click="showDetail(scope.row)"
              >
                作品详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-全局组件-->
        <pageCom
          :searchParams="searchParams"
          :total="total"
          @searchList="searchList"
        ></pageCom>
        <dialogDetailCom
          v-if="dialogData.isShow"
          :dialog-data="dialogData"
        ></dialogDetailCom>
      </div>
    </div>
    <dialogReply
      :dialogData="addCommentData"
      v-if="addCommentData.isShow"
      @refresh="refresh"
    >
      <template v-slot:historyList>
        <div class="history-list">
          <div class="title">历史消息</div>
          <!-- 表格部分 -->
          <el-table
            v-loading="loading"
            :data="historyTableData"
            stripe
            style="width: 100%"
            max-height="310"
            ref="table"
          >
            <el-table-column
              label="接收/回复时间"
              width="200"
              prop="createdDate"
            ></el-table-column>
            <el-table-column
              label="用户名/马甲名"
              prop="user.userName"
              width="150"
            >
            </el-table-column>
            <el-table-column label="消息记录" min-width="200">
              <template slot-scope="scope">
                <span v-html="filterContent(scope.row)"></span>
              </template>
            </el-table-column>
            <el-table-column label="视图预览" width="160" align="center">
              <template slot-scope="scope">
                <template
                  v-if="scope.row.images && scope.row.images.length > 0"
                >
                  <listImgShow
                    :imgInfo="scope.row.images"
                    :showNum="false"
                  ></listImgShow>
                </template>
                <span v-else>-</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </dialogReply>
  </div>
</template>
<script>
import topSearch from '@component/interactManagement/interactManage/topSearch' // 上部搜索条件
import dialogDetailCom from '@common/dialogDetailCom' // 详情-弹窗-公共组件
import dialogReply from '@common/dialogReply'
import { filterCon } from '@utils/pubFunction'
import { saveScrollMixins } from '@/mixins/saveScroll'
import { getSearchList, downUrl } from '@/api/interactManagement/interactAPI'
import { getHistoryList } from '@/api/common/commentsAPI' // 接口
export default {
  name: 'interactMsg',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    dialogDetailCom,
    dialogReply
  },
  data() {
    return {
      loading: true,
      total: 0,
      // 搜索条件
      formInline: {
        originTopicType: '', // 来源,默认全部
        content: '', // 搜索框内容
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createTime: []
      },
      // 表格数据
      tableData: [],
      // 历史消息
      historyTableData: [],
      // 分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      dialogData: {
        isShow: false, // 默认隐藏
        type: '', // 类型，workDetail-作品详情，jobDetail-作业详情
        id: '', // 编辑时，传递的参数
        title: ''
      },
      addCommentData: {
        isShow: false,
        commentId: ''
      },
      powerStr: 'system:message:list', // 是否查询的标识
      canGetList: true, // 是否可以查询列表
      powerAry: [], // 可显示的权限
      canShowPage: false // 是否显示当前页面
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    // 获取权限
    // this.getPower()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        this.canShowPage = true
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
        }
        this.searchList()
      })
    },
    /* 获取列表 */
    searchList() {
      if (!this.canGetList) return
      this.loading = true
      let params = { ...this.searchParams, ...this.formInline }
      delete params.createTime
      getSearchList(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows || []
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 过滤返回评论内容 */
    filterContent(item) {
      return filterCon(item)
    },
    /* 显示详情 */
    showDetail(item) {
      this.dialogData.type =
        item.originTopicType === '4' ? 'jobDetail' : 'workDetail'
      this.dialogData.id = item.originTopicId
      this.dialogData.title = '互动消息详细'
      this.dialogData.isShow = true
    },
    /* 跳转页面 */
    changeView(name, id, originTopicType) {
      let topicType = ''
      switch (originTopicType) {
        case '2':
          topicType = 'ACTIVITY_POST'
          break
        case '3':
          topicType = 'WORKS'
          break
        case '4':
          topicType = 'HOMEWORK'
          break
        case '8':
          topicType = 'LIFE'
          break
        case '22':
          topicType = 'ARTICLE'
          break
        case '23':
          topicType = 'MOVIE'
          break
      }
      // let mId = this.$route.query.mId
      let query = {
        // mId,
        topicType,
        id
      }
      this.$router.push({ name, query })
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    // 导出互动消息
    exportFile() {
      this.$confirm('确定导出所有互动消息吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let url = downUrl()
          let params = { ...this.formInline, ...this.searchParams }
          delete params.createTime
          this.downFile('get', url, params, '互动消息')
        })
        .catch(() => {})
    },
    // 添加回复
    addComment(commentId, receiverUser) {
      this.addCommentData.isShow = true
      this.addCommentData.commentId = commentId
      this.addCommentData.userId = receiverUser.userId
      this.addCommentData.avatar = receiverUser.avatar
      this.getHistory(commentId)
    },
    /*获取历史消息*/
    getHistory(commentId) {
      getHistoryList(
        commentId,
        (response) => {
          this.historyTableData = response || []
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    refresh() {}
  }
}
</script>
<style lang="less">
@import url('~@common/style/imgBox.less');
#interactList {
  .vest-info {
    dt {
      width: 50px;
      float: left;
      .el-image {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    dd {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .history-list {
    .title {
      font-size: 14px;
      color: #222;
      margin-top: 30px;
      font-weight: bold;
    }
    .el-table {
      margin: 10px 0 20px;
    }
    .img-box {
      width: 35px;
      height: 35px;
    }
    .el-image {
      width: 100% !important;
      height: 100% !important;
      margin-right: 0 !important;
    }
  }
}
</style>
